import { ComponentProps, VueComponent } from "vue3-oop"
import { WidgetNode } from '../types'

import FvrGrid from './_grid/fvr-grid'
import FvrCard from './_card/fvr-card'
import FvrCollapse from './_collapse/fvr-collapse'
import FvrInput from './input/fvr-input'
import FvrTextarea from './textarea/fvr-textarea'
import FvrNumber from './number/fvr-number'
import FvrRadio from './radio/fvr-radio'
import FvrCheckbox from './checkbox/fvr-checkbox'
import FvrSelect from './select/fvr-select'
import FvrTimepicker from './timepicker/fvr-timepicker'
import FvrTimerange from './timerange/fvr-timerange'
import FvrDatepicker from './datepicker/fvr-datepicker'
import FvrDaterange from './daterange/fvr-daterange'
import FvrSwitch from './switch/fvr-switch'
import FvrRate from './rate/fvr-rate'
import FvrSlider from './slider/fvr-slider'
import FvrImage from './image/fvr-image'
import FvrUpload from './upload/fvr-upload'
import FvrButton from './button/fvr-button'
import FvrDivider from './divider/fvr-divider'

interface IProps {
  widgetNode: WidgetNode
}
export default class FvrWidget extends VueComponent<IProps> {
  static defaultProps: ComponentProps<IProps> = {
    widgetNode: {}
  }

  constructor(
  ){
    super();
  }

  render() {
    const { formData,widgetNode } = this.props;
    const { widgetItem } = widgetNode;

    let widget = null;
    if(widgetItem){
      if(widgetItem.type==='GRID'){
        widget = <FvrGrid widgetNode={widgetNode} />
      }else if(widgetItem.type==='CARD'){
        widget = <FvrCard widgetNode={widgetNode} />
      }else if(widgetItem.type==='COLLAPSE'){
        widget = <FvrCollapse widgetNode={widgetNode} />
      }else if(widgetItem.type==='BUTTON'){
        widget = <FvrButton widgetNode={widgetNode} />
      }else if(widgetItem.type==='DIVIDER'){
        widget = <FvrDivider widgetNode={widgetNode} />
      }else if(widgetItem.type==='INPUT'){
        widget = <FvrInput widgetNode={widgetNode} />
      }else if(widgetItem.type==='TEXTAREA'){
        widget = <FvrTextarea widgetNode={widgetNode} />
      }else if(widgetItem.type==='NUMBER'){
        widget = <FvrNumber widgetNode={widgetNode} />
      }else if(widgetItem.type==='RADIO'){
        widget = <FvrRadio widgetNode={widgetNode} />
      }else if(widgetItem.type==='CHECKBOX'){
        widget = <FvrCheckbox widgetNode={widgetNode} />
      }else if(widgetItem.type==='SELECT'){
        widget = <FvrSelect widgetNode={widgetNode} />
      }else if(widgetItem.type==='TIMEPICKER'){
        widget = <FvrTimepicker widgetNode={widgetNode} />
      }else if(widgetItem.type==='TIMERANGE'){
        widget = <FvrTimerange widgetNode={widgetNode} />
      }else if(widgetItem.type==='DATEPICKER'){
        widget = <FvrDatepicker widgetNode={widgetNode} />
      }else if(widgetItem.type==='DATERANGE'){
        widget = <FvrDaterange widgetNode={widgetNode} />
      }else if(widgetItem.type==='SWITCH'){
        widget = <FvrSwitch widgetNode={widgetNode} />
      }else if(widgetItem.type==='RATE'){
        widget = <FvrRate widgetNode={widgetNode} />
      }else if(widgetItem.type==='SLIDER'){
        widget = <FvrSlider widgetNode={widgetNode} />
      }else if(widgetItem.type==='IMAGE'){
        widget = <FvrImage widgetNode={widgetNode} />
      }else if(widgetItem.type==='UPLOAD'){
        widget = <FvrUpload widgetNode={widgetNode} />
      }
    }
    return widget;
  }
}